<template>
	<view class="content">
		<scroll-view scroll-x class="tabs-content" enable-flex scroll-with-animation>
			<view class="order-nav">
				<view class="nav-item" v-for="(nav, index) in orderState" :key="index" @tap="onNav(nav, index)">
					<view class="item-title" :class="{ 'item-title-active': tabindex === index }">{{ nav.title }}</view>
					<view class="nav-line" :class="{ 'line-active': tabindex === index }"></view>
				</view>
			</view>
		</scroll-view>

		<scroll-view  scroll-y style="height: 85vh;" @scrolltolower="scrolltolower">
			<view class="balance-list">
				<view class="balance-item" v-for="(item, index) in blaceMoneyList" :key="index">
					<view class="balance-left">
						<view class="balance-status">{{item.service_type_name}}</view>
						<view class="balance-time">{{item.created_at}}</view>
					</view>
					<view class="balance-right">
						{{item.type == 1? '+':''}}{{item.change_money}}
					</view>
				</view>
				<view class="line"></view>
			</view>
			<noMore v-if="!blaceMoneyList.length"></noMore>
			
		</scroll-view>
	</view>

</template>

<script>
	import noMore from '@/components/noMore/noMore.vue'
	export default {
		data() {
			return {
				tabindex: 0,
				orderState: [{
						id: 0,
						title: '全部',
					},
					{
						id: 1,
						title: '收入',
					},
					{
						id: 2,
						title: '支出',
					}
				],
				blaceMoneyList: [],
				blanceType: 0,
				page: 1,
			};
		},
		onLoad() {
			this.getUserBlaceList();
		},
		methods: {
			scrolltolower(){
				this.page++
				this.getUserBlaceList()
			},
			onNav(nav, index) {
				if (this.tabindex !== index) {
					this.page = 1
					this.tabindex = index;
					this.blanceType = index;
					this.blaceMoneyList = []
					this.getUserBlaceList();
				}
			},
			// 获取收入支出明细
			getUserBlaceList() {
				this.$http.get('user.getUserBlaceList', {"record_type": this.blanceType,'page' : this.page }).then(res => {
					if(this.page==1){
						this.blaceMoneyList = []
					}
					this.blaceMoneyList = this.blaceMoneyList.concat(res.data.data)  
				})
			}
		},
		components:{
			noMore
		},
	}
</script>

<style scoped lang="scss">
	.content{
		.tabs-content {
			white-space: nowrap;
			background-color: #FF4F10;
			padding-top: 40upx;
			// margin-top: 30upx;
				.order-nav{
					display: inline-block;
					width: 100%;
					.nav-item{
						display: inline-block;
						width: 33.3%;
						text-align: center;
						font-size: 30upx;
						color: #FFFFFF;
						height: 85upx;
						.item-title-active{
							color: #FFFFFF;
						}
						.nav-line {
							width: 104upx;
							height: 8upx;
							background: #FF4F10;
							margin: 0 auto;
							margin-top: 17upx;
							border-radius: 4upx;
						}
						
						.line-active {
							background: #FFFFFF;
						}
					}
				}
		}
	
		.balance-list{
			padding-top: 20upx;
			height: 85vh;
			.balance-item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30upx;
				// margin-bottom: 10upx;
				.balance-left{
					.balance-status{
						margin-bottom: 15upx;
						font-size: 28upx;
					}
					.balance-time{
						color: #818181;
						font-size: 25upx;
					}
				}
				.balance-right{
					font-size: 33upx;
					font-family: PingFang SC;
					font-weight: bold;
				}
			}
			.line{
				width: 750upx;
				height: 1upx;
				background: #EEEEEE;
			}
		}
	}
</style>
